
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>紫鹿学堂</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8;" >
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        *{
            box-sizing: border-box;
            border-width: 0px;
            outline-width: 0px;
            margin: 0;
            padding: 0;
        }

        body {
            font-size:12px;
            font-family: "Microsoft YaHei", "Microsoft Sans Serif";
            width: 100%;
            -webkit-font-smoothing: antialiased;
        }
        input {
            font-size: 18px;
            line-height: 24px;
            color: #b6b6b6;
            border-bottom: 1px solid #d6d6d6;
            width:240px;
            height: 45px;
        }
        input,img{
            vertical-align: bottom;
        }

    </style>
</head>
<body >
<div style="text-align: center;">
    <input id="phone"  type="text" name="phone" placeholder="输入手机号">
    <input id="uniqueKey" type="hidden"  name="uniqueKey" value="{{$key}}">
</div>
<div style="text-align: center;">
    <input id="photoVerify" type="text"  name="photoVerify" placeholder="输入验证码" style="width: 160px">
    <img src="http://alpha.api.uniform.tmallwo.com/api/v1/captcha">
</div>

<div style="text-align: center;">
    <input id="phoneVefify" type="text"  name="phoneVefify" placeholder="输入手机验证码" style="width: 160px">
    <a id="sendmsg" style="font-size: 18px; color:#ffffff;background-color: #6e1581; width: 80px;line-height:40px;border-radius:20px;display: inline-block ">发送</a>
</div>

{{--<div style="text-align: center;--}}
    {{--margin-top: 30px;">--}}
    {{--<a id="bind" style="font-size: 18px; color:#ffffff;background-color: #6e1581; width: 240px;text-align: center;line-height:40px;border-radius:20px;display: inline-block ">绑定手机</a>--}}

{{--</div>--}}
</body>
</html>


<script type="text/javascript">

    $(function(){

        $("#bind").click(function(){
            var phone = $('#phone').val();
            var uniqueKey = $('#uniqueKey').val();
            var phoneVefify = $('#phoneVefify').val();
            console.log('phone:' + phone);
            console.log('uniqueKey:' + uniqueKey);
            console.log('phoneVefify:' + phoneVefify);


            $.ajax({
                type: 'POST',
                url: '/api/v1/bind/phone',
                data: {phone:phone, verify_code:phoneVefify,type:'wechat',unique_key:uniqueKey},
                success: function(result){
                    console.log(result)
                    if(result.error_code != 0)
                    {
                        alert(result.error_message);
                    }else
                    {
                        alert('绑定成功')
                        location.href='/api/weixin';
                    }

                },
                dataType: 'json'
            });

        });

        $("#sendmsg").click(function(){
            var phone = $('#phone').val();
            var uniqueKey = $('#uniqueKey').val();
            var photoVerify = $('#photoVerify').val();
            console.log('phone:' + phone);
            console.log('uniqueKey:' + uniqueKey);
            console.log('photoVerify:' + photoVerify);

            $.ajax({
                type: 'POST',
                url: 'http://alpha.api.uniform.tmallwo.com/api/v1/verifycode',
                xhrFields:{withCredentials: true}, // 发送凭据
                data: {phone:phone, captcha_code:photoVerify},
                success: function(result){
                    console.log(result)
                    if(result.error_code != 0)
                    {
                        alert(result.error_message);
                    }else
                    {
                        alert('请输入验证码')
                    }

                },
                dataType: 'json'
            });

        });
    })
</script>



